<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui" xmlns:c="http://java.sun.com/jsp/jstl/core">

<h:head>
</h:head>
<h:body>
	<ui:composition template="masterLayout.xhtml">
		<ui:define name="metadata">
			<f:view>
				<f:metadata>
					<f:event listener="#{backLogin.verificarAccesoMonitor}" type="preRenderView"></f:event>
				</f:metadata>
			</f:view>
		</ui:define>
		<ui:define name="contenido">
			<h:form id="form">
				<p:growl id="growl" autoUpdate="true" showDetail="true" />
				<p:panel header="Interfaces">
					<h:panelGrid columns="8">
						<p:outputLabel for="tipoInterfaz" value="Tipo de interfaz: " />
						<p:autoComplete id="tipoInterfaz" value="#{estadoTiendas.interfaz}"
							completeMethod="#{estadoTiendas.filtrarInterfaz}" forceSelection="true" var="inter"
							itemLabel="#{inter.descripcion}" itemValue="#{inter}" converter="convertidor.interfaz" size="4"
							dropdown="true" required="true">
							<p:ajax event="itemSelect" listener="#{estadoTiendas.mostrarEstadoInterfaz}" process="@this"
								update="tablas reporte" />
						</p:autoComplete>
						<p:spacer width="60" height="10" />
						<p:outputLabel for="numTablas" value="Tablas: " />
						<p:spinner id="numTablas" value="#{estadoTiendas.numTablas}" min="1" max="7" update="tablas" />
						<p:outputLabel for="numFilas" value="Filas " />
						<p:spinner id="numFilas" value="#{estadoTiendas.numFilas}" min="1" max="150" update="tablas" />
						<p:commandButton value="Actualizar" actionListener="#{estadoTiendas.actualizar}" update="tablas" />
					</h:panelGrid>
				</p:panel>
				<p:panelGrid id="tablas" columns="#{estadoTiendas.numTablas}" columnClasses="foo">
					<c:forEach items="#{estadoTiendas.estadosPorTablas}" var="estadoTabla">
						<p:dataTable value="#{estadoTabla}" var="estado" rows="#{estadoTiendas.numFilas}" emptyMessage="">
							<p:column headerText="Cod Tda" style="width:25px;"> #{estado.codigoTienda} </p:column>
							<p:column headerText="Nom Tda" style="width:135px;"> #{estadoTiendas.getTienda(estado.codigoTienda).nombre} </p:column>
							<p:column headerText="Fil" style="width:25px;"> #{estado.cantidadArchivos} </p:column>
							<p:column headerText="" style="width:5px;">
								<p:graphicImage value="resources/images/azul.png" rendered="#{not estadoTiendas.getTienda(estado.codigoTienda).activo}" />
								<p:graphicImage value="resources/images/rojo.png" rendered="#{estadoTiendas.getTienda(estado.codigoTienda).activo and estado.condicion eq 1}" />
								<p:graphicImage value="resources/images/verde.png" rendered="#{estadoTiendas.getTienda(estado.codigoTienda).activo and estado.condicion eq 2}" />
								<p:graphicImage value="resources/images/blanco.png" rendered="#{estadoTiendas.getTienda(estado.codigoTienda).activo and estado.condicion eq 3}" />
							</p:column>
						</p:dataTable>
					</c:forEach>
					<f:facet name="footer">
						<p:commandButton value="Actualizar" actionListener="#{estadoTiendas.actualizar()}"
							update="tablas reporte" />
						<p:commandButton id="reporte" value="Reporte" disabled="#{estadoTiendas.numeroTiendasRojo eq 0}"
							ajax="false" onclick="PrimeFaces.monitorDownload(start, stop);" icon="ui-icon-arrowthick-1-s">
							<p:fileDownload value="#{estadoTiendas.archivoReporte}" />
						</p:commandButton>
						Rojo: #{estadoTiendas.numeroTiendasRojo} <p:spacer width="40" height="10" /> 
						Verde: #{estadoTiendas.numeroTiendasVerde} <p:spacer width="40" height="10" /> 
						Blanco: #{estadoTiendas.numeroTiendasBlanco} <p:spacer width="40" height="10" /> 
						Azul: #{estadoTiendas.numeroTiendasAzul}
				</f:facet>
				</p:panelGrid>
			</h:form>
		</ui:define>
	</ui:composition>

	<script type="text/javascript">
function start() {
    PF('statusDialog').show();
}
 
function stop() {
    PF('statusDialog').hide();
}
</script>
</h:body>
</html>
